<template>
	<div class="container">
		<el-form ref="form" :model="fromData" :rules="rules" hide-required-asterisk label-width="80px">
			<h2 style="text-align: center;">胖虎到你家</h2>
			<el-form-item label="账号" prop="username">
				<el-input  prefix-icon="el-icon-user" placeholder='请输入账号' v-model="fromData.username"></el-input>
			</el-form-item>
			<el-form-item  label="密码" prop="password">
				<el-input  prefix-icon="el-icon-lock" placeholder='请输入密码' type="password" v-model="fromData.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submit">登录</el-button>
				<el-button @click="reset(form)">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				fromData:{
					username:'',
					password:''
				},
				rules:{
					username:[
						{
							required:true,
							message:'请输入账号',
							trigger:'blur'
						},
						{
							min:1,
							max:6,
							message:'长度在1到6个字符',
							trigger:'blur'
						}
						],
						password:[
							{required:true,
							message:'请输入账号',
							trigger:'blur'},
							{min:1,
							max:6,
							message:'长度在1到6个字符',
							trigger:'blur'}
						]
				}
			}
		},
		methods:{
			reset(){
				this.$refs['form'].resetFields();
			},
			submit(){
				this.$refs['form'].validate((valid)=>{
					if(valid){
						this.$http.post('http://43.143.190.87:8182/login?username='+this.fromData.username+'&pwd='+this.fromData.password)
						.then(res=>{
								if(res.data.code==1){
									this.$message.success('登录成功')
									this.$router.push('/main')
									}else{
										this.$message.error('账号或密码有误')
										}
							console.log(res.data)
						})
						.catch(error=>{
							this.$message.error('服务器异常！')
						})
					}else{
						this.$message.error('请输入合法的数据')
						return false
					}
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100vh;
		background-image: url(../assets/1.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%, 100%;
		overflow: hidden;
	}
	.el-form{
		border-radius: 20px;
		padding: 50px 50px;
		width: 450px;
		background-color: rgba(255, 255,255,0.8);
		margin: 150px auto;
	}
</style>